<template>
   
   <div   class="wholescreen">
       <div class="top-button">
        <el-button type="success"  @click="saveConfig">保存</el-button>
        <el-button type="danger"  >取消</el-button>
	   </div>	
        <el-row :gutter="20" >
		  <el-col :span="24">
		     <h3>Global Tool Configuration</h3>
		  </el-col>	
		
		  <el-col :span="24" style="padding:5px">
		       <el-card class="box-card" >
			        <div slot="header" class="clearfix">
                       <span style="line-height: 36px;">JDK</span>
                    </div>
					<div v-for="o in Jdks" class="text item" style="padding:5px">
					   <el-card class="box-card" >
					     <el-row :gutter="20" style="padding-left:50px">
						      <el-col :span="5" style="padding:5px">
		                         JDK 别名
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.JdkAlias"></el-input>
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                         JDK 路径
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.JdkPath"></el-input>
		                      </el-col>
							  <el-col :span="19" style="padding:5px">
		                         
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                          <el-button type="danger" @click="DeleteJDK(o.JdkId)" >删除JDK</el-button>
		                      </el-col>
						 </el-row>
					   </el-card>	
					</div>
					<div  class="text item" style="padding:5px">
					   <el-button type="success"    @click="NewJDK">新增JDK</el-button>
					</div>
			   </el-card>
		  </el-col>
		
		  <el-col :span="24" style="padding:5px">
		       <el-card class="box-card" >
			        <div slot="header" class="clearfix">
                       <span style="line-height: 36px;">Maven</span>
                    </div>
					<div v-for="o in Mavens" class="text item" style="padding:5px">
					   <el-card class="box-card" >
					     <el-row :gutter="20" style="padding-left:50px">
						      <el-col :span="5" style="padding:5px">
		                         Maven 别名
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.MavenAlias"></el-input>
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                         Maven 路径
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.MavenPath"></el-input>
		                      </el-col>
							   
						      <el-col :span="5" style="padding:5px">
		                         配置文件
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.Settings"></el-input>
		                      </el-col>
							
							
							  <el-col :span="19" style="padding:5px">
		                         
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                          <el-button type="danger" @click="DeleteMaven(o.MavenId)" >删除Maven</el-button>
		                      </el-col>
						 </el-row>
					   </el-card>	
					</div>
					<div  class="text item" style="padding:5px">
					   <el-button type="success"    @click="NewMaven">新增Maven</el-button>
					</div>
			   </el-card>
		  </el-col>	
		  <el-col :span="24" style="padding:5px">
		       <el-card class="box-card" >
			        <div slot="header" class="clearfix">
                       <span style="line-height: 36px;">Gradle</span>
                    </div>
					<div v-for="o in Gradles" class="text item" style="padding:5px">
					   <el-card class="box-card" >
					     <el-row :gutter="20" style="padding-left:50px">
						      <el-col :span="5" style="padding:5px">
		                         Gradle 别名
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.GradleAlias"></el-input>
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                         Gradle 路径
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.GradlePath"></el-input>
		                      </el-col>
							   
							
							
							  <el-col :span="19" style="padding:5px">
		                         
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                          <el-button type="danger" @click="DeleteGradle(o.GradleId)" >删除Gradle</el-button>
		                      </el-col>
						 </el-row>
					   </el-card>	
					</div>
					<div  class="text item" style="padding:5px">
					   <el-button type="success"    @click="NewGradle">新增Gradle</el-button>
					</div>
			   </el-card>
		  </el-col>	
		
		  <el-col :span="24" style="padding:5px">
		       <el-card class="box-card" >
			        <div slot="header" class="clearfix">
                       <span style="line-height: 36px;">SonarScanner</span>
                    </div>
					<div v-for="o in SonarScanners" class="text item" style="padding:5px">
					   <el-card class="box-card" >
					     <el-row :gutter="20" style="padding-left:50px">
						      <el-col :span="12" style="padding:5px">
		                         SonarScanner 别名
		                      </el-col>	
							  <el-col :span="12" style="padding:5px">
		                          <el-input v-model="o.SonarScannerAlias" ></el-input>
		                      </el-col>	
							  <el-col :span="12" style="padding:5px">
		                         SonarScanner 路径
		                      </el-col>	
							  <el-col :span="12" style="padding:5px">
		                          <el-input v-model="o.SonarScannerPath" ></el-input>
		                      </el-col>
							   
							
							
							  <el-col :span="12" style="padding:5px">
		                         
		                      </el-col>	
							  <el-col :span="12" style="padding:5px">
		                          <el-button type="danger" @click="DeleteSonarScanner(o.SonarScannerId)" >删除SonarScanner</el-button>
		                      </el-col>
						 </el-row>
					   </el-card>	
					</div>
					<div  class="text item" style="padding:5px">
					   <el-button type="success"    @click="NewSonarScanner">新增SonarScanner</el-button>
					</div>
			   </el-card>
		  </el-col>
		
		
		  <el-col :span="24" style="padding:5px">
		       <el-card class="box-card" >
			        <div slot="header" class="clearfix">
                       <span style="line-height: 36px;">Git</span>
                    </div>
					<div v-for="o in Gits" class="text item" style="padding:5px">
					   <el-card class="box-card" >
					     <el-row :gutter="20" style="padding-left:50px">
						      <el-col :span="5" style="padding:5px">
		                         Git 别名
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.GitAlias"></el-input>
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                         Git 路径
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.GitPath"></el-input>
		                      </el-col>
							   
							
							
							  <el-col :span="19" style="padding:5px">
		                         
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                          <el-button type="danger" @click="DeleteGit(o.GitId)" >删除Git</el-button>
		                      </el-col>
						 </el-row>
					   </el-card>	
					</div>
					<div  class="text item" style="padding:5px">
					   <el-button type="success"    @click="NewGit">新增Git</el-button>
					</div>
			   </el-card>
		  </el-col>	
		
		  <el-col :span="24" style="padding:5px">
		       <el-card class="box-card" >
			        <div slot="header" class="clearfix">
                       <span style="line-height: 36px;">Svn</span>
                    </div>
					<div v-for="o in Svns" class="text item" style="padding:5px">
					   <el-card class="box-card" >
					     <el-row :gutter="20" style="padding-left:50px">
						      <el-col :span="5" style="padding:5px">
		                         Svn 别名
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.SvnAlias"></el-input>
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                         Svn 路径
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="o.SvnPath"></el-input>
		                      </el-col>
							   
							
							
							  <el-col :span="19" style="padding:5px">
		                         
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                          <el-button type="danger" @click="DeleteSvn(o.SvnId)" >删除Svn</el-button>
		                      </el-col>
						 </el-row>
					   </el-card>	
					</div>
					<div  class="text item" style="padding:5px">
					   <el-button type="success"    @click="NewSvn">新增Svn</el-button>
					</div>
			   </el-card>
		  </el-col>	
		</el-row>
   </div>
</template>

<script>

    import Vue from 'vue';
	
	import {Col,Row ,Card ,Button,Input} from 'element-ui'
	Vue.component(Col.name, Col)
	Vue.component(Row.name, Row)
    Vue.component(Card.name, Card)
	Vue.component(Button.name, Button)
	Vue.component(Input.name, Input)
	import { Message } from 'element-ui';
	import 'element-ui/lib/theme-default/button.css';
	import 'element-ui/lib/theme-default/card.css';
	import 'element-ui/lib/theme-default/row.css';
	import 'element-ui/lib/theme-default/col.css';
	import 'element-ui/lib/theme-default/input.css';
	import 'element-ui/lib/theme-default/message.css';
	
	
	const uuid = require('uuid');
	import {ConfigurationService} from '../apis/ConfigurationService.js';
    export default {
        data () {
            return {
				Jdks:[],
				Mavens:[],
				Gradles:[],
				SonarScanners:[],
				Gits:[],
				Svns:[]
				
            }
        },
		components:{},
        mounted() {
			 const me=this;
			 this.$store.dispatch('change_page_name',"Global Tool Configuration");
			 ConfigurationService.GetGlobalToolConfiguration().then(ret=>{
						
							me.Jdks =ret.Jdks ||[];
							me.Mavens =ret.Mavens || [];
							me.Gradles =ret.Gradles ||[];
							me.SonarScanners =ret.SonarScanners ||[];
							me.Gits =ret.Gits ||[];
							me.Svns =ret.Svns ||[];
						
			 })
        }
		,methods:{
                //JDK
                
                NewJDK(){
					this.Jdks.push({JdkId:uuid.v1() , JdkAlias :"",JdkPath:""  })
				},
				//删除JDK
				DeleteJDK(JdkId){
					this.Jdks= this.Jdks.filter(item=> item.JdkId !=JdkId );
				},
				
				//Maven
                
                NewMaven(){
					this.Mavens.push({MavenId:uuid.v1() , MavenAlias :"",MavenPath:"" ,Settings:"" })
				},
				//删除Maven
				DeleteMaven(MavenId){
					this.Mavens= this.Mavens.filter(item=> item.MavenId !=MavenId );
				},
				
				//Gradle
                
                NewGradle(){
					this.Gradles.push({GradleId:uuid.v1() , GradleAlias :"",GradlePath:""  })
				},
				//删除Gradle
				DeleteGradle(GradleId){
					this.Gradles= this.Gradles.filter(item=> item.GradleId !=GradleId );
				},
				
				
				
				//SonarScanner
                
                NewSonarScanner(){
					this.SonarScanners.push({SonarScannerId:uuid.v1() , SonarScannerAlias :"",SonarScannerPath:""  })
				},
				//删除SonarScanner
				DeleteSonarScanner(SonarScannerId){
					this.SonarScanners= this.SonarScanners.filter(item=> item.SonarScannerId !=SonarScannerId );
				},
				
				//Git
                
                NewGit(){
					this.Gits.push({GitId:uuid.v1() , GitAlias :"",GitPath:""  })
				},
				//删除Git
				DeleteGit(GitId){
					this.Gits= this.Gits.filter(item=> item.GitId !=GitId );
				},
				
				//Svn
                
                NewSvn(){
					this.Svns.push({SvnId:uuid.v1() , SvnAlias :"",SvnPath:""  })
				},
				//删除Svn
				DeleteSvn(GitId){
					this.Svns= this.Svns.filter(item=> item.SvnId !=SvnId );
				},
				
				//保存配置
				saveConfig(){
					const me=this;
					ConfigurationService.SaveGlobalToolConfiguration({
						Jdks :this.Jdks,
						Mavens :this.Mavens,
						Gradles :this.Gradles,
						SonarScanners :this.SonarScanners,
						Gits :this.Gits,
						Svns :this.Svns
					}).then(ret=>{
						if(ret.result){
							Message({
                               message: '保存成功',
                               type: 'success'
                            });
						} else {
							Message({
                               message: '保存失败',
                               type: 'warn'
                            });
						}
					})
				}


		}
    }
</script>

<style>
.top-button{
   position: fixed;
   right: 50px;
   bottom: 200px; 
}
</style>